<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="24" style="text-align: right;">
          <el-button type="primary" size="mini" @click="addProductBtnClick">添加物品</el-button>
          <el-button type="primary" size="mini" @click="downloadProductTemplateBtnClick">模板下载</el-button>
          <el-upload
            action=""
            :before-upload="onBeforeUploadProductExcel"
            :http-request="(params)=>uploadProductExcel(params)"
            :multiple="false"
            :show-file-list="false"
            style="display: inline-block; margin-left: 10px;">
            <el-button size="mini" type="primary">表格导入</el-button>
          </el-upload>
        </el-col>
      </el-row>
      <el-table :data="productList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="物料编号" prop="productCode" min-width="200"></el-table-column>
        <el-table-column label="物料名称" prop="productName" min-width="200"></el-table-column>
        <el-table-column label="物料颜色" prop="productColor" min-width="200"></el-table-column>
        <el-table-column label="物料模号" prop="productMould" min-width="200"></el-table-column>
        <el-table-column label="物料单重" prop="weight" min-width="200"></el-table-column>
        <el-table-column label="一箱个数" prop="countBox" min-width="200"></el-table-column>
        <el-table-column label="库存下限" prop="lowerLimit" min-width="200"></el-table-column>
        <el-table-column label="库存上限" prop="upperLimit" min-width="200"></el-table-column>
        <el-table-column label="库龄" prop="storageAge" min-width="200"></el-table-column>
        <el-table-column label="物品类型" prop="typeName" min-width="200"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="productEditBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="productDeleteBtnClick(scope.row)">删除</el-button>
            <el-button type="warning" size="mini" @click="uploadProductPicBtnClick(scope.row)">上传图片</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="productListReqForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="productListReqForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-dialog v-dialogDrag title="添加物品" :visible.sync="addProductDialog" width="40%" center @closed="addProductDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="addProductFormRef" :model="addProductForm" :rules="addProductFormRules" label-position="right"
            label-width="80px">
            <!--权限分组-->
            <el-form-item label="物料编号" prop="productCode" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.productCode"></el-input>
            </el-form-item>
            <!--权限名称-->
            <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.productName"></el-input>
            </el-form-item>
            <!--权限路径-->
            <el-form-item label="物料颜色" prop="productColor" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.productColor"></el-input>
            </el-form-item>
            <el-form-item label="物料模号" prop="productMould" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.productMould"></el-input>
            </el-form-item>
            <el-form-item label="物料单重" prop="weight" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="一箱个数" prop="countBox" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.countBox"></el-input>
            </el-form-item>
            <el-form-item label="库存下限" prop="lowerLimit" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.lowerLimit"></el-input>
            </el-form-item>
            <el-form-item label="库存上限" prop="upperLimit" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.upperLimit"></el-input>
            </el-form-item>
            <el-form-item label="库龄" prop="storageAge" v-on:keyup.enter.native="addProduct">
              <el-input v-model="addProductForm.storageAge"></el-input>
            </el-form-item>
            <el-form-item label="物品类型" prop="typeName" v-on:keyup.enter.native="addProduct">
              <div style="text-align: left;">
                <el-select v-model="addProductForm.typeName" placeholder="请选择" >
                  <el-option v-for="item in productTypeList" :key="item.id" :label="item.type_name" :value="item.type_name"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="addProduct">提交</el-button>
          </div>
        </span>
      </el-dialog>
      <el-dialog v-dialogDrag title="编辑物品" :visible.sync="editProductDialog" width="40%" center @closed="editProductDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="editProductFormRef" :model="editProductForm" :rules="editProductFormRules" label-position="right"
            label-width="80px">
            <!--权限分组-->
            <el-form-item label="物料编号" prop="productCode" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.productCode"></el-input>
            </el-form-item>
            <!--权限名称-->
            <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.productName"></el-input>
            </el-form-item>
            <!--权限路径-->
            <el-form-item label="物料颜色" prop="productColor" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.productColor"></el-input>
            </el-form-item>
            <el-form-item label="物料模号" prop="productMould" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.productMould"></el-input>
            </el-form-item>
            <el-form-item label="物料单重" prop="weight" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="一箱个数" prop="countBox" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.countBox"></el-input>
            </el-form-item>
            <el-form-item label="库存下限" prop="lowerLimit" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.lowerLimit"></el-input>
            </el-form-item>
            <el-form-item label="库存上限" prop="upperLimit" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.upperLimit"></el-input>
            </el-form-item>
            <el-form-item label="库龄" prop="storageAge" v-on:keyup.enter.native="editProduct">
              <el-input v-model="editProductForm.storageAge"></el-input>
            </el-form-item>
            <el-form-item label="物品类型" prop="typeName" v-on:keyup.enter.native="editProduct">
              <div style="text-align: left;">
                <el-select v-model="editProductForm.typeName" placeholder="请选择" >
                  <el-option v-for="item in productTypeList" :key="item.id" :label="item.type_name" :value="item.type_name"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="editProduct">提交</el-button>
          </div>
        </span>
      </el-dialog>
    </el-card>
    <el-dialog v-dialogDrag title="上传图片" :visible.sync="upLoadPicDialog" width="30%" center :close-on-click-modal="false">
      <span style="text-align: center">
        <el-upload
          drag
          action=""
          :before-upload="onBeforeUploadImage"
          :http-request="(params)=>uploadProductPic(params)"
          :multiple="false"
          :show-file-list="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1MB</div>
        </el-upload>
        <div style="width: 100%; height: 100%;">
          <el-image style="width: 300px; height: 200px; margin-top: 10px;" :src="productPic"></el-image>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Product',
  data () {
    return {
      productList: [],
      productTypeList: [],
      total: 0,
      productPic: '',
      productCode: '',
      addProductDialog: false,
      editProductDialog: false,
      upLoadPicDialog: false,
      productListReqForm: {
        pageNum: 1,
        pageSize: 10
      },
      addProductForm: {
        productCode: '',
        productName: '',
        productColor: '',
        productMould: '',
        weight: '',
        countBox: '',
        lowerLimit: '',
        upperLimit: '',
        storageAge: '',
        typeName: ''
      },
      editProductForm: {
        productId: '',
        productCode: '',
        productName: '',
        productColor: '',
        productMould: '',
        weight: '',
        countBox: '',
        lowerLimit: '',
        upperLimit: '',
        storageAge: '',
        typeName: ''
      },
      addProductFormRules: {
        productCode: [{
          required: true,
          message: '请输入物料编号',
          trigger: 'blur'
        }],
        productName: [{
          required: true,
          message: '请输入物料名称',
          trigger: 'blur'
        }]
      },
      editProductFormRules: {
        productCode: [{
          required: true,
          message: '请输入物料编号',
          trigger: 'blur'
        }],
        productName: [{
          required: true,
          message: '请输入物料名称',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    async getProductList () {
      const res = await this.$apiUtil.postByJson('product/getProductList', this.productListReqForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.productList = res.data.productVOS
      this.productTypeList = res.data.productTypeVOS
      this.total = res.data.totalSize
    },
    handleSizeChange (newSize) {
      this.productListReqForm.pageSize = newSize
      this.getProductList()
    },
    handleCurrentChange (newPage) {
      this.productListReqForm.pageNum = newPage
      this.getProductList()
    },
    addProductBtnClick () {
      this.addProductDialog = true
    },
    async addProduct () {
      const res = await this.$apiUtil.postByJson('product/addProduct', this.addProductForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('添加物品成功！')
      this.addProductDialog = false
      this.getProductList()
    },
    addProductDialogClosed () {
      this.$refs.addProductFormRef.resetFields()
    },
    editProductDialogClosed () {
      this.$refs.editProductFormRef.resetFields()
    },
    productEditBtnClick (row) {
      console.log(row)
      this.editProductDialog = true
      this.editProductForm.productId = row.productId
      this.editProductForm.productCode = row.productCode
      this.editProductForm.productName = row.productName
      this.editProductForm.productColor = row.productColor
      this.editProductForm.productMould = row.productMould
      this.editProductForm.weight = row.weight
      this.editProductForm.countBox = row.countBox
      this.editProductForm.upperLimit = row.upperLimit
      this.editProductForm.lowerLimit = row.lowerLimit
      this.editProductForm.storageAge = row.storageAge
      this.editProductForm.typeId = row.typeId
    },
    async productDeleteBtnClick (row) {
      this.$alert('确定删除物品:' + row.productName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('product/deleteProduct', { productId: row.productId })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除物品成功')
            this.getProductList()
          }
        }
      })
    },
    async editProduct () {
      const res = await this.$apiUtil.postByJson('product/editProduct', this.editProductForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('编辑物品成功！')
      this.editProductDialog = false
      this.getProductList()
    },
    uploadProductPicBtnClick (row) {
      this.productPic = ''
      if (row.picture !== '' && row.picture !== null) {
        this.productPic = row.picture
      }
      this.productCode = row.productCode
      this.upLoadPicDialog = true
    },
    async uploadProductPic (params) {
      const uploadData = new FormData()
      uploadData.append('file', params.file)
      uploadData.append('productCode', this.productCode)
      const res = await this.$apiUtil.upLoadByForm('product/upLoadProductPic', uploadData)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.productPic = res.data.picture
      this.getProductList()
      this.$message.success('上传物料图片成功')
    },
    async uploadProductExcel (params) {
      const uploadData = new FormData()
      uploadData.append('file', params.file)
      const res = await this.$apiUtil.upLoadByForm('product/upLoadProductExcel', uploadData)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.$message.success('上传物料表格成功')
    },
    onBeforeUploadImage (file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') {
        this.$message.error('上传文件只能是图片格式!')
        return false
      }
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error('上传文件大小不能超过 1MB!')
        return false
      }
      return true
    },
    onBeforeUploadProductExcel (file) {
      console.log(file.type)
      if (file.type !== 'application/vnd.ms-excel') {
        this.$message.error('上传文件只能是图片格式!')
        return false
      }
      return true
    },
    async downloadProductTemplateBtnClick() {
      const res = await this.$apiUtil.downloadFile('product/downloadProductTemplate')
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
    }
  },
  created () {
    this.getProductList()
  }
}
</script>

<style lang="less" scoped>
/deep/.el-upload-dragger{
  width: 200px;
  height: 100px;
}
/deep/.el-icon-upload{
  margin-top: 0px;
}
</style>
